<template>
    <van-action-sheet
        v-model:show="shoppingVisible"
        :lazy-render="false"
        title="已点菜品"
        :overlay-style="{ zIndex: 1 }"
        style="z-index: 2"
    >
        <van-cell-group v-if="orderFoodList.length">
            <van-cell
                v-for="(food, index) in orderFoodList"
                :key="'food-' + index"
                :title="food.name"
            >
                <template v-slot:icon>
                    <img class="food-img" :src="food.img" alt="" />
                </template>
                <template v-slot:label>
                    ￥<span class="font-14">{{ food.price }}</span>
                </template>
                <OrderNumberStepper :food="food" />
            </van-cell>
        </van-cell-group>
        <van-empty v-else description="您尚未点餐" />
        <div class="content-hr" />
    </van-action-sheet>

    <van-action-sheet
        v-model:show="billVisible"
        :lazy-render="false"
        title="已点菜品"
        :overlay-style="{ zIndex: 1 }"
        style="z-index: 2"
    >
        <van-cell-group v-if="orderPlacedFoodList.length">
            <van-cell
                v-for="(food, index) in orderPlacedFoodList"
                :key="'food-' + index"
                :title="food.name"
            >
                <template v-slot:icon>
                    <img class="food-img" :src="food.img" alt="" />
                </template>
                <template v-slot:label>
                    ￥<span class="font-14">{{ food.price }}</span>
                </template>
                <span>数量：{{ food.orderNumber }}</span>
            </van-cell>
        </van-cell-group>
        <van-empty v-else description="您尚未点餐" />
        <div class="content-hr" />
    </van-action-sheet>

    <van-action-bar class="actionBar">
        <van-action-bar-icon
            icon="cart-o"
            :badge="allOrderNumber"
            text="购物车"
            @click="shoppingVisibleChange"
        />
        <van-action-bar-icon
            icon="bill-o"
            :badge="orderPlacedTotalNumber"
            text="已下单"
            @click="billVisibleChange"
        />
        <van-action-bar-button
            type="danger"
            text="提交订单"
            :disabled="!allOrderNumber"
            @click="submitOrder"
        />
    </van-action-bar>
</template>

<script>
import { ref, computed } from 'vue';
import { useStore, mapState, mapGetters } from 'vuex';

import OrderNumberStepper from '@/components/OrderNumberStepper';

export default {
    components: { OrderNumberStepper },
    computed: {
        ...mapState('order', ['orderPlacedFoodList']),
        ...mapGetters('order', ['orderFoodList']),
    },
    setup() {
        const store = useStore();

        const shoppingVisible = ref(false);
        const shoppingVisibleChange = () => {
            shoppingVisible.value = !shoppingVisible.value;
        };
        const billVisible = ref(false);
        const billVisibleChange = () => {
            billVisible.value = !billVisible.value;
        };

        const allOrderNumber = computed(() => {
            let number = store.getters['order/allOrderNumber'];
            number = number > 0 ? number : '';
            return number;
        });
        const orderPlacedTotalNumber = computed(() => {
            let number = store.getters['order/orderPlacedTotalNumber'];
            number = number > 0 ? number : '';
            return number;
        });

        const submitOrder = () => {
            store.commit('order/submitOrder');
        };

        return {
            shoppingVisible,
            shoppingVisibleChange,
            billVisible,
            billVisibleChange,
            allOrderNumber,
            orderPlacedTotalNumber,
            submitOrder,
        };
    },
};
</script>

<style scoped>
.content-hr {
    width: 1px;
    height: 50px;
    visibility: hidden;
}

.food-img {
    display: block;
    width: 40px;
    height: 40px;
    margin-right: 5px;
}

.actionBar {
    z-index: 10;
}
</style>
